<!DOCTYPE html>
<html>
<head>
    <title>所属房源查看</title>
<#include "../common/common.ftl"/>
    <style>
        table td {
            text-align: center;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <blockquote class="layui-elem-quote layui-bg-white">
        <p>【<span class="jmdf-color-red">${(zsProject.projectName)!}</span>】所分配安置房源查看</p>
    </blockquote>

    <div class="layui-row layui-col-space10">
        <div class="layui-col-md2">
            <div class="layui-card">
                <div class="layui-card-header">房源信息</div>
                <div class="layui-card-body">
                    <div class="layui-row">
                        <ul id="treeMenu"></ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md10">
            <div class="layui-card">
                <div class="layui-card-header">
                    楼盘图
                    <span style="padding-left: 15px;" class="jmdf-color-red" id="buildingInfo"></span>
                     <span style="position: absolute;right: 30px;">
                        <span class="layui-badge" style="background-color: green;">&nbsp;可选&nbsp;</span>
                        <span class="layui-badge" style="background-color: red;">&nbsp;已选&nbsp;</span>
                     </span>
                </div>
                <div class="layui-card-body">
                    <div class="layui-form-item">
                        <div class="layui-form-mid layui-col-md12" id="houseHoldInfo" style="margin-top: -20px;margin-bottom: -40px">
                        </div>
                    </div>
                </div>

                <div class="layui-card-body">
                    <div class="layui-form-item">
                        <div class="layui-form-mid layui-col-md12">
                            <div id="buildInfo"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/layui/layui.js" charset="utf-8"></script>
<script src="/modules/business/house.js" charset="utf-8"></script>
<script>
    layui.config({
        base: '/modules/' //静态资源所在路径
    }).use(["tree", "jquery", "jmdf", "form"], function () {
        var tree = layui.tree, $ = layui.jquery, jmdf = layui.jmdf, form = layui.form;
        $.ajax({
            url: "loadTreeData",
            type: "post",
            data: {zsProjectId: ${zsProject.id}, _t: new Date().getTime()},
            success: function (data) {
                var option = {
                    elem: '#treeMenu' //传入元素选择器
                    , nodes: [data],
                    click: function (node) {
                        onClick(node);
                    }
                };
                tree(option);
            }
        });

        function onClick(node) {
            var id = node.id;//id
            if (id == null || id == "")
                return;
            var buildNum = node.name;//buildNum
            var zsProjectId = ${zsProject.id};//buildNum
            loadHousePicture(id, buildNum);
            houseHoldView(zsProjectId, id, buildNum);
        }

        //查询楼盘图数据
        function loadHousePicture(azProjectId, buildNum) {
            $.ajax({
                url: "loadHousePicture",
                type: "post",
                data: {
                    zsProjectId: ${zsProject.id},
                    azProjectId: azProjectId,
                    buildNum: buildNum,
                    _time: new Date().getTime()
                },
                success: function (data) {
                    var azProject = data.azProject;
                    $("#buildingInfo").text(azProject.projectName + buildNum + "号楼");
                    var pictureHtml = "";
                    pictureHtml = getChooseHousePicture(data);
                    $("#buildInfo").html(pictureHtml);
                    $(".houseStyle").click(function () {
                        var obj = $(this);
                        var houseStatus = obj.attr("houseStatus");
                        if (houseStatus != undefined) {
                            jmdf.view("houseView?houseId=" + obj.attr("id"));
                        }
                    })
                }
            });
        }

        function houseHoldView(zsProjectId, azProjectId, buildNum) {
            $.ajax({
                url: "houseHoldInfo",
                type: "post",
                data: {
                    zsProjectId: zsProjectId,
                    azProjectId: azProjectId,
                    buildNum: buildNum,
                    _time: new Date().getDate()
                },
                success: function (data) {
                    $("#houseHoldInfo").html("加载中...");
                    var houseHoldHtml = "";
                    houseHoldHtml = getHouseHold(data);
                    $("#houseHoldInfo").html(houseHoldHtml);
                }
            })
        }

        //封装户型统计查看表
        function getHouseHold(data) {
            var houseHoldMap = data.houseHoldMap;
            var houseInfoMap = data.houseInfoMap;
            var houseHoldTotalMap = data.houseHoldTotalMap;
            var houseInfoHtml = "<div class='layui-container' style='width: 100%'> <table class='layui-table', style='text-align: center';>" +
                    "<tr class='layui-bg-gray'>" +
                    "<th style='text-align: center;'>居室类型</th>" +
                    "<th style='text-align: center;'>总分配房屋数量</th>" +
                    "<th style='text-align: center;'>总分配房屋建筑面积/㎡</th>" +
                    "<th style='text-align: center;'>剩余可选房屋数量</th>" +
                    "<th style='text-align: center;'>剩余可选房屋面积/㎡</th>" +
                    "</tr>";

            for (var key in houseInfoMap) {
                houseInfoHtml = houseInfoHtml +
                        "<tr>" +
                        "<th style='text-align: center;'>" + houseHoldMap[key] + "</th>" +
                        "<th style='text-align: center;'>" + houseInfoMap[key]['houseCount'] + "</th>" +
                        "<th style='text-align: center;'>" + houseInfoMap[key]['houseAreaSum'] + "</th>" +
                        "<th style='text-align: center;'>" + houseInfoMap[key]['houseCanChooseCount'] + "</th>" +
                        "<th style='text-align: center;'>" + houseInfoMap[key]['houseCanChooseAreaSum'] + "</th>" +
                        "</tr>";
            }

            houseInfoHtml = houseInfoHtml +
                    "<tr>" +
                    "<th style='text-align: center;'>合计</th>" +
                    "<th style='text-align: center;'>" + houseHoldTotalMap['houseTotalCount'] + "</th>" +
                    "<th style='text-align: center;'>" + houseHoldTotalMap['houseAreaTotal'] + "</th>" +
                    "<th style='text-align: center;'>" + houseHoldTotalMap['houseCanChooseCount'] + "</th>" +
                    "<th style='text-align: center;'>" + houseHoldTotalMap['houseCanChooseArea'] + "</th>" +
                    "</tr>";
            "</table></div>";
            return houseInfoHtml;
        }
    });
</script>
</body>
</html>